<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>大型群众活动安全管理信息系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/font-awesome.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${request.contextPath}/statics/css/all-skins.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/main.css">
    <link rel="stylesheet" href="../../statics/css/login.css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition login-page">
<div class="login-box" id="rrapp" v-cloak>
    <div class="login-logo">
        <!--
        <img src="../../statics/images/login.png" alt=""/>
        -->
        <h1 style="margin-left: 30px;">大型群众活动安全管理信息系统</h1>
    </div>
        <div class="login-box-body">
            <div >
                <img  src="../../statics/images/login-bj.png"  class="login-box-body-img"/>
            </div>
            <div style="left: 100px">
                <div class="form-group has-feedback input-cont" style="margin-top: 35px">
                    <input type="text" v-model="username" class="login-input" placeholder="账号">
                </div>
                <div class="form-group has-feedback input-cont">
                    <input type="password" class="login-input" v-model="password" placeholder="密码">
                </div>
                <div class="form-group has-feedback input-cont" style=" margin-left: 57px;">
                    <input type="text" class="login-input" v-model="captcha" @keyup.enter="login" style="width: 110px" placeholder="验证码">
                    <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
                    <!--&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="refreshCode">点击刷新</a>-->
                </div>
                <div>
                    <!--<div class="col-xs-8">-->
                    <!--<div class="checkbox icheck">-->
                    <!--</div>-->
                    <!--</div>-->
                    <!-- /.col -->

                    <div v-if="error" class="check-error"><img src="../../statics/images/login-tip.png" alt=""
                                                               style="display: inline">&nbsp;&nbsp;{{errorMsg}}
                    </div>
                    <button type="button" class="login-button" @click="login">登录</button>
                    <!-- /.col -->
                </div>
            </div>
            <!-- /.social-auth-links -->
        </div>
</div>
<!-- /.login-box -->
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/libs/jquery.slimscroll.min.js"></script>
<script src="${request.contextPath}/statics/libs/fastclick.min.js"></script>
<script src="${request.contextPath}/statics/libs/app.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#rrapp',
        data: {
            username: '',
            password: '',
            /* captcha: '', */
            error: false,
            errorMsg: '',
            /* src: 'captcha.jpg' */
        },
        beforeCreate: function () {
            if (self != top) {
                top.location.href = self.location.href;
            }
        },
        methods: {
            /* refreshCode: function () {
                this.src = "captcha.jpg?t=" + $.now();
            }, */
            login: function (event) {
                /* var data = "username=" + vm.username + "&password=" + vm.password + "&captcha=" + vm.captcha; */
                var data = "username=" + vm.username + "&password=" + vm.password;
                $.ajax({
                    type: "POST",
                    url: "sys/login",
                    data: data,
                    dataType: "json",
                    success: function (result) {
                        if (result.code == 0) {//登录成功
                            parent.location.href = 'index.html';
                        } else {
                            vm.error = true;
                            vm.errorMsg = result.msg;

                            /* vm.refreshCode(); */
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>
